<template>
  <view class="login">
    <view class="login__img">
      <image class="img" src="https://source.qingyunclouds.com/login.png"></image>
    </view>
    <view class="login__content">
      <u-form :model="form" :rules="rules" ref="uForm">
        <!--        用户名登陆-->
        <u-form-item v-if="form.loginType == 2" label="用户名" label-width="120" prop="userName">
          <u-input v-model="form.userName" placeholder="请输入用户名"/>
        </u-form-item>
        <u-form-item v-if="form.loginType == 2" label="密码" label-width="120" prop="passWord">
          <u-input v-model="form.passWord" placeholder="请输入密码" type="password"/>
        </u-form-item>
        <!--        手机号码登陆-->
        <u-form-item v-if="form.loginType == 1" label="手机号码" maxlength="11" label-width="140" prop="phone">
          <u-input v-model="form.phone" placeholder="请输手机号码"/>
        </u-form-item>
        <u-form-item v-if="form.loginType == 1" label="验证码" label-width="140" prop="code">
          <view class="code">
            <u-input v-model="form.code" maxlength="6" placeholder="请输入验证码"/>
            <u-button size="mini" class="getCode" slot="right" type="primary" @click="getCode">{{codeText}}</u-button>
            <!--            <text class="getCode">获取</text>-->
          </view>

        </u-form-item>
      </u-form>
      <view class="login-type">
        <text @click="switchLoginType">{{loginType == 1 ? '用户名登陆' : '手机验证码登陆'}}</text>
      </view>
    </view>
    <view class="submit"  @click='submit'>
      登陆
    </view>
<!--    <u-button class="submit" :custom-style="btnStyle"	 @click='submit' type="primary">登录</u-button>-->
    <u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
    <u-toast ref="uToast"></u-toast>
    <w-loading text="登陆中..." mask="true" click="true" ref="loading"></w-loading>
  </view>

</template>
<script>
import {login, getCode} from "../../api/login";
import {shopInfo} from "../../api/shop";

export default {
  data() {
    return {
      model: "",
      form: {
        loginType: 2,
        userName: "",
        passWord: "",
        phone: "",
        code: ""

      },
      btnStyle:{
        background:"#D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%)"
      },
      // false 账号密码 true 验证码
      loginType:false,
      rules: {
        userName: [{
          required: true,
          message: '请输入用户名',
          trigger: ['blur', 'change'],
        },
        ],
        passWord: [{
          required: true,
          min: 6,
          max: 18,
          message: '密码在6~18位',
          trigger: ['blur','change' ]
        },],

      },
      mobile: '',
      code: '',
      codeText: ''
    };
  },
  methods: {
    codeChange(text) {
      this.codeText = text;
    },
    //切换用户登陆类型
    switchLoginType() {
      this.loginType = !this.loginType;
      if (this.loginType){
        this.form = {
          loginType:1,
          phone:"",
          code:""
        }
        // this.form.loginType = 1
        // delete this.form.userName
        // delete this.form.passWord
      }else {
        this.form = {
          loginType:2,
          userName:"",
          passWord:""
        }
        // this.form.loginType = 2;
        // this.form.userName = "";
        // this.form.passWord = ""
        // delete this.form.code
        // delete this.form.phone
      }


    },
    //发送验证码
    getCode() {
      if (this.form.phone) {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          getCode({
            phone: this.form.phone
          }).then(res => {
            if (res.code == 200) {
              uni.hideLoading();
              this.$u.toast('验证码已发送');
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            }
            console.log(res);
          })
        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      } else {
        this.$u.toast('请输入手机号码');
      }
    },
    //获取用户信息
    getInfo(){
      shopInfo().then(res =>{
        uni.setStorage({
          key: 'userInfo',
          data: res.data
        });

      })
    },
    //登陆
    submit() {
      const _this = this;

      _this.$refs.uForm.validate(valid => {
        if (valid) {

          wx.login({
            success(res) {
              if (res.code) {
                _this.form.wxcode = res.code
                if (_this.form.loginType == 2) {
                  delete _this.form.code
                  delete _this.form.phone
                } else {
                  delete _this.form.userName
                  delete _this.form.passWord
                }

                _this.$refs.loading.open();
                login(_this.form).then(res => {
                  if (res.code == 200) {
                    _this.$refs.loading.close();
                    //将用户信息存到本地
                    uni.setStorage({
                      key: 'token',
                      data:'Bearer ' + res.data.token,
                      success(res) {
                        _this.getInfo();
                        _this.$u.toast('登陆成功');
                        uni.switchTab({
                          url: "/pages/code/index",
                        })
                      }
                    });
                  }
                }).catch(err =>{
                  _this.$refs.loading.close();
                })
              } else {
                console.log('登录失败！' + res.errMsg)
              }
            }
          })

        } else {
          console.log('验证失败');
        }
      });
    },
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);

  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;

  .login__img {
    width: 100%;
    margin-top: 35%;

    .img {
      display: block;
      margin: 0 auto;
      width: 500rpx;
      height: 274rpx;
    }
  }

  .login__content {
    width: 500rpx;

    margin: 0 auto;
    // background-color: yellow;

    .form__uername {
      // display: flex;
      // flex-wrap: nowrap;
      .form__name {
        margin-left: 20rpx;
      }
    }

  }

  ::v-deep .u-size-default.data-v-6e15e680 {
    width: 522rpx;
    height: 78rpx;
    line-height: 78rpx;
    border-radius: 78rpx;
    margin-top: 40rpx;
    color: #FFFFFF;
    font-size: 32rpx;
  }


  .login-type {
    width: 450rpx;

    display: flex;
    justify-content: flex-end;
    margin: 40rpx auto 0;
  }

  .code {
    display: flex;
    align-items: center;

    .getCode {
      margin-left: 20rpx;
    }
  }
  .submit{
    width: 70%;
    height: 80rpx;
    line-height: 80rpx;
    color: #ffffff;
    font-size: 30rpx;
    border-radius: 50rpx;
    text-align: center;
    margin: 30rpx auto;
    background:#D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%) ;
  }
}
</style>
